<template>
  <div>
    <div class="frist">
      <van-search v-model="value" placeholder="搜索我的食谱" show-action>
        <template #left>
          <van-icon name="plus" />
        </template>
        <template #action>设置</template>
      </van-search>
    </div>

    <div class="tring">
      <van-image round width="8rem" height="4rem" src="https://img01.yzcdn.cn/vant/cat.jpeg"></van-image>
      <van-cell-group>
        <van-cell title="胡焱" />
        <van-tag type="warning">Lv.1</van-tag>
      </van-cell-group>
      <van-icon name="arrow" />
    </div>

    <div class="second">
      <van-row>
        <van-col span="6">0</van-col>
        <van-col span="6">0</van-col>
        <van-col span="6">20</van-col>
      </van-row>
    </div>

    <div class="thrid">
      <van-row>
        <van-col span="6">关注</van-col>
        <van-col span="6">粉丝</van-col>
        <van-col span="6">&nbsp;帮贡</van-col>
      </van-row>
    </div>

    <div class="four">
      <van-cell title="这个人很懒~什么都没有留下~" />
    </div>

    <div class="five">
      <van-row>
        <van-icon name="apps-o" />
        <van-icon name="manager-o" />
        <van-icon name="clock-o" />
        <van-icon name="label-o" />
      </van-row>
    </div>

    <div class="six">
      <van-row>
        <van-col span="6">我的收藏</van-col>
        <van-col span="6">我的课程</van-col>
        <van-col span="6">浏览历史</van-col>
        <van-col span="6">签到任务</van-col>
      </van-row>
    </div>

    <van-divider :style="{ color: '#000', borderColor: '#000', padding: '0 16px' }" />

    <div class="seven">
      <van-tabs v-model="active">
        <van-tab title="食谱·0"></van-tab>
        <van-tab title="作品·0"></van-tab>
      </van-tabs>
    </div>

    <div class="eight">
      <!-- 网络错误 -->
      <van-empty image="network" description="分享是一种美德~" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      active: 2,
    }
  },
  methods: {
    onCancel() {
      Toast('取消')
    },
  },
}
</script>

<style lang="scss" scoped>

.tring {
  margin-left: 8px;
  display: flex;
  width: 100%;
  .van-icon {
  margin-left: 210px;
  margin-top: 25px;
  width: 80px;
}
.van-image {
  margin-top: 10px;
  margin-left: 5px;
  display: block;
}
.van-cell{
  margin-top: 5px;
  margin-left: 12px;
  font-size: 12px;
}
.van-tag {
  margin-left: 25px;
}
}

.second {
  margin-top: 10px;
  margin-left: 35px;
  width: 100%;
  .van-row {
  font-size: 15px;
}
}

.thrid {
  margin-top: 2px;
  margin-left: 27px;
  padding-right: 10px;
  width: 100%;
  .van-row {
  font-size: 13px;
}
}

.five {
  width: 100%;
  margin-left: 28px;
  .van-row {
  font-size: 25px;
}
.van-icon {
  padding-right: 13px;
  width: 80px;
}
}

.six {
  margin-left: 15px;
  width: 100%;
  .van-row {
  font-size: 12px;
}
}
</style>


